import { Container, Form } from "react-bootstrap";
import useGlobalConext from "../GlobalContext";
import { useRef, useState } from "react";
import { Link } from "react-router-dom";
import { Col, Row } from "react-bootstrap";
import { Button, InputGroup } from "react-bootstrap";
import useMessageBox from "../Modal/MessageBox_Context";


function Login({ className, onSuccess, onFail, type = 'login'}) {
    const [context, dispatch] = useGlobalConext();
    const showMessageBox = useMessageBox();
    const emailRef = useRef();
    const passwordRef = useRef();
    const rememberMeRef = useRef();

    const nicknameRef = useRef();
    const phoneRef = useRef();
    const confirmPasswordRef = useRef();

    const [validated, setValidated] = useState(false);

    function validate(e) {
        const form = e.currentTarget;
        if (form.checkValidity() === false) {
            e.preventDefault();
            e.stopPropagation();
        }
        setValidated(true);
        
        if (type === 'register') {
            if (passwordRef.current.value !== confirmPasswordRef.current.value) {
                showMessageBox('提示', '两次输入的密码不一致！', 'ok');
                onFail?.('两次输入的密码不一致！');
                e.preventDefault();
                e.stopPropagation();
                return;
            }
        }

        if (type === 'login') {
            dispatch({
                type: 'login',
                payload: {
                    email: emailRef.current.value,
                    password: passwordRef.current.value,
                    rememberMe: rememberMeRef.current.checked,
                    onSuccess: onSuccess,
                    onFail: (data) => {
                        console.log(data);
                        if (data?.code === 1000)
                            showMessageBox('提示', '用户名或密码错误！', 'ok');
                        else
                            showMessageBox('提示', '登录失败！', 'ok');
                        onFail?.(data);
                    }
            }});
        } else {
            dispatch({
                type: 'register',
                payload: {
                    email: emailRef.current.value,
                    password: passwordRef.current.value,
                    nickname: nicknameRef.current.value,
                    phone: phoneRef.current.value,
                    onSuccess: onSuccess,
                    onFail: (data) => {
                        console.log(data);
                        showMessageBox('提示', data.msg, 'ok');
                        onFail?.(data);
                    }
            }});
        }
    }

    // TODO 表单验证与服务器返回错误信息提示
    if (type === 'login') {
        return (
            <Container className={className}>
                <Form noValidate onSubmit={ validate } >
                    <div className={validated && "was-validated"}>
                        <Form.Group className="mb-2" controlId="login-email">
                            <Form.Label>邮箱</Form.Label>
                            <Form.Control type="text" ref={emailRef} required />
                        </Form.Group>
                        <Form.Group className="mb-2">
                            <Form.Label>密码</Form.Label>
                            <Form.Control type="password" ref={passwordRef} required />
                        </Form.Group>
                    </div>
                    <Form.Group className="mb-2">
                        <Form.Check type="checkbox" label="记住我" ref={rememberMeRef} />
                    </Form.Group>
                    <Link to="/register">没有账号？</Link>
                    <Form.Group className="mb-2">
                        <Form.Control type="submit" value="登录" className="primary" />
                    </Form.Group>
                </Form>
            </Container>
        );
    } else if (type === 'register') {
        return (
            <Container className={className} >
                <Form noValidate onSubmit={ validate }>
                    <div className={validated && "was-validated"} >
                        <Form.Group className="mb-2">
                            <Form.Label>昵称<sup>*</sup></Form.Label>
                            <Form.Control type="text" ref={nicknameRef} required />
                        </Form.Group>
                        <Form.Group className="mb-2">
                            <Form.Label>邮箱<sup>*</sup></Form.Label>
                            <Form.Control type="email" ref={emailRef} required />
                        </Form.Group>
                        <Form.Group className="mb-2">
                            <Form.Label>密码<sup>*</sup></Form.Label>
                            <Form.Control type="password" ref={passwordRef} required />
                        </Form.Group>
                        <Form.Group className="mb-2">
                            <Form.Label>确认密码<sup>*</sup></Form.Label>
                            <Form.Control type="password" ref={confirmPasswordRef} required />
                        </Form.Group>
                        <Form.Group className="mb-2">
                            <Form.Label>手机号</Form.Label>
                            <Form.Control ref={phoneRef} />
                        </Form.Group>
                    </div>
                    <p className="text-muted"><small>（带 * 的为必填项）</small></p>
                    <Link to="/login">已有账号？</Link>
                    <Form.Group className="mb-2">
                        <Form.Control type="submit" value="注册" className="primary" />
                    </Form.Group>
                </Form>
            </Container>
        );
    }

}

function LoginModal() {

}

export default Login;
export { LoginModal };